<template>
    <div class="pageHead">
        <div class="pageTitle">门店基本资料</div>

        <!-- 选择 ‘增加总部’按钮 -->
        <div class="sumSel">
            
                <p>选择总部：</p>
                <el-select v-model="sumShopvalue" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name">
                    </el-option>
                </el-select>
                <el-row>
                    <el-button plain @click="addHeadShop">增加总部</el-button>
                </el-row>

        </div>
    </div>

</template>

<script>



    export default {
        name:'SumShopSel',
        data() {
            return {
                options: [
                    {
                    sumShopvalue: 'beijing',
                    label: '北京'
                    }
                ],
                sumShopvalue:''
            }
        },
        methods:{
            addHeadShop(){
                this.$shopMessage.$emit('addHeadBtn')
            }
        }
    }
    </script>

<style>
    .pageHead{
        width: 100%;
    }
    .pageTitle{
        font-size: 25px;
        font-weight: 500;
        border-bottom: 1px solid #ccc;
        padding: 5px 20px;
    }
    .sumSel{
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 50px;
        padding: 0 20px;
        margin: 15px 0;
    }
    .sumSel p{
        display: inline-block;
        line-height: 50px;
        padding-right: 20px;
    }
    .el-select{
        position: absolute;
        margin-top: -14px;
    }
    .el-row{
        display: inline-block;
        position: absolute;
        top: 50%;
        margin-top: -20px;
        left: 400px;
    }
</style>



